<template>
	<view
		class="page-navbar"
		:style="{
			height: `calc(100% - ${paddingTop + 'px'})`,
			paddingTop: paddingTop + 'px',
			background: navbarConfig.bgColor || bgColor,
		}"
	>
		<view class="navbar" :style="{ height: navbarHeight + 'px' }">
			<view class="left" @click="navBack">
				<view class="leftBox" v-if="navbarConfig.showLeft === false ? false : navbarConfig.showLeft || showLeft">
					<image v-if="!(navbarConfig.leftImgSrc || leftImgSrc)" src="../../static/img/common/back.png" mode="heightFix"></image>
					<image v-if="navbarConfig.leftImgSrc || leftImgSrc" :src="navbarConfig.leftImgSrc || leftImgSrc" mode="heightFix"></image>
				</view>
			</view>

			<view class="title">
				<view class="text">{{ navbarConfig.title || title }}</view>
			</view>

			<view class="right"></view>
		</view>

		<view class="page-navbar-content" :style="{ height: `calc(100% - ${navbarHeight + 'px'})`, paddingTop: navbarHeight + 'px' }">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 导航栏标题
		title: {
			type: String,
			default: '',
		},
		// 是否显示左边按钮
		showLeft: {
			type: Boolean,
			default: true,
		},
		// 自定义左侧图片按钮
		leftImgSrc: {
			type: String,
			default: '',
		},
		// 页面背景色
		bgColor: {
			type: String,
			default: 'linear-gradient(#ddebfe 0%, #f8f9fb 60%)',
		},
		// 不使用内置返回逻辑
		customBack: {
			type: Boolean,
			default: false,
		},

		// 导航栏配置（相当于把上述的所有配置综合在一个对象里，综合传参、单个传参均可）
		navbarConfig: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			paddingTop: 0,
			navbarHeight: 0,
		};
	},
	methods: {
		navBack() {
			if (!(this.navbarConfig.showLeft === false ? false : this.navbarConfig.showLeft || this.showLeft)) return;
			if (this.navbarConfig.leftImgSrc || this.leftImgSrc) {
				this.$emit('leftClick');
			} else if (this.navbarConfig.customBack === false ? false : this.navbarConfig.customBack || this.customBack) {
				this.$emit('leftClick');
			} else {
				uni.navigateBack({
					fail: () => {
						uni.reLaunch({
							url: '/pages/index/index',
						});
					},
				});
			}
		},
	},
	mounted() {
		this.paddingTop = uni.getSystemInfoSync()['statusBarHeight'];

		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// 导航栏高度 = 胶囊高度 + （胶囊.top - 状态栏高度）*2
		this.navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2;
		// #endif

		// #ifdef H5 || APP-PLUS || MP-ALIPAY
		this.navbarHeight = 44;
		// #endif
	},
};
</script>

<style lang="scss" scoped>
.page-navbar {
	.navbar {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: fixed;

		.left {
			width: 100rpx;
			text-align: center;
			padding: 0 30rpx;

			image {
				height: 35rpx;
			}
		}

		.title {
			max-width: 370rpx;
			color: #111b36;
			font-size: 36rpx;
			font-weight: 500;

			.text {
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.right {
			width: 100rpx;
		}

		& > view {
			height: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
		}
	}

	.page-navbar-content {
	}
}
</style>
